<template>
    <el-form

            inline
            ref="form"
            size="mini"
            :model="form"
    >

        <el-form-item
                class="g-block"
                label="请假类型"
                      prop="isAskForLeave"
                      :rules="{ required: true, message: '请假类型不能为空', trigger: 'blur' }"
        >
            <el-switch
                    v-model="form.isAskForLeave"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    active-text="请假"
                    inactive-text="补假">
            </el-switch>
        </el-form-item>
    <el-form-item
            class="g-block"
            label="请假原因"
                  prop="reason"
                  :rules="{ required: true, message: '请假原因不能为空', trigger: 'blur' }"
    >
        <el-input type="textarea" v-model="form.reason"></el-input>
    </el-form-item>

        <div v-for="(userLeave, index) in form.userLeaves" :key="index">
            <el-divider>请假明细 {{index + 1}}</el-divider>
            <el-form-item
                    label="假期"
                    :prop="'userLeaves.' + index + '.vacationId'"
                    :rules="{ required: true, message: '假期不能为空', trigger: 'blur' }"
            >
                <Select
                        v-model="userLeave.vacationId"
                        :url="$baseURL.attend +  '/attend/vacation/list'"
                ></Select>
            </el-form-item>
            <el-form-item
                    label="班次"
                    :prop="'userLeaves.' + index + '.groupAndClasseId'"
                    :rules="{ required: true, message: '班次不能为空', trigger: 'blur' }"
            >
                <el-select class="g-width100"
                           ref="elSelect"
                           v-model="userLeave.groupAndClasseId"
                           no-data-text="您未配置可用考勤组"
                           v-on:change="(val)=> {let selected = val.split('-');userLeave.groupId =selected[0];userLeave.classeId =selected[1] }"
                           v-on:input="(val)=> {let selected = val.split('-');userLeave.groupId =selected[0];userLeave.classeId =selected[1] }"
                >
                    <template v-if="groupAndClasses">
                        <el-option-group
                                v-for="(groupItem,groupItemIndex) in groupAndClasses"
                                :key="groupItemIndex"
                                :label="groupItem.group.name">
                            <el-option
                                    v-for="(item,index) in groupItem.classes"
                                    :label="[item.name,'(',item.startTime,'-',item.endTime,')'].join('')"
                                    :value="groupItem.group.id + '-' + item.id"
                                    :key="index"
                            ></el-option>
                        </el-option-group>
                    </template>
                </el-select>
            </el-form-item>
            <el-form-item
                    label="开始时间"
                    :prop="'userLeaves.' + index + '.startAt'"
                    :rules="{ required: true, message: '开始时间不能为空', trigger: 'blur' }"
            >
                <DateTimePicker
                        v-model="userLeave.startAt"
                                type="datetime"
                                value-format="timestamp"
                ></DateTimePicker>
            </el-form-item>
            <el-form-item
                    label="结束时间"
                    :prop="'userLeaves.' + index + '.endAt'"
                    :rules="{ required: true, message: '结束时间不能为空', trigger: 'blur' }"
            >
                <DateTimePicker
                        v-model="userLeave.endAt"
                        type="datetime"
                        value-format="timestamp"
                ></DateTimePicker>
            </el-form-item>
            <el-form-item v-if="index > 0">
                <el-button @click.prevent="removeUserLeave(index)" :disabled="buttonDisabled">删除 请假明细 {{index + 1}}</el-button>
            </el-form-item>

        </div>
        <el-form-item class="g-margin-top30">
            <el-button @click.prevent="addUserLeave()" :disabled="buttonDisabled">添加假期</el-button>
            <el-button type="primary" @click.prevent="doSubmit(false)" :loading="tempSaveLoading" :disabled="buttonDisabled">暂存</el-button>
            <el-button type="primary" @click.prevent="doSubmit(true)" :loading="submitLoading" :disabled="buttonDisabled">提交审批</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    import Select from '../../../../common-util/src/components/common/Select.vue'
    import DateTimePicker from '../../../../common-util/src/components/common/DateTimePicker.vue'
    export default {
        components: {
            Select,
            DateTimePicker
        },
        data() {
            return {
                form: {
                    isSubmitApprove: false,
                    isAskForLeave: true,
                    reason: null,
                    userLeaves: []
                },
                groupAndClasses: [],
                buttonDisabled: false,
                tempSaveLoading: false,
                submitLoading: false
            }
        },
        mounted (){
            this.initGroupAndClasses()
            this.addUserLeave()
        },
        methods: {
            initGroupAndClasses(){
                this.axios.get(this.$baseURL.attend +  '/attend/groupclasserel/groupAndClassesList').then(res => {
                    this.groupAndClasses = res.data
                })
            },
            doSubmit(isSubmitApprove) {
                if(this.form.userLeaves.length == 0){
                    this.$message.error('请添加假期明细')
                    return
                }
                this.form.isSubmitApprove = isSubmitApprove

                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        if (isSubmitApprove) {
                            this.submitLoading = true
                        }else {
                            this.tempSaveLoading = true
                        }
                        this.buttonDisabled = true
                        this.axios.post(this.$baseURL.attend +  '/attend/userleaveapplication',this.form).then(res=>{
                            this.$message.success('提交成功')
                        }).catch(error=>{
                            if(error.response){
                                this.$message.error(error.response.data.msg)
                            }else{

                                this.$message.error('网络错误或服务不可用')
                            }
                            this.buttonDisabled = false
                        }).finally(()=>{
                                this.submitLoading = false
                                this.tempSaveLoading = false
                            })
                    } else {
                        return false;
                    }
                });
            },
            addUserLeave() {
                this.form.userLeaves.push({
                    startAt: null,
                    endAt: null,
                    groupId: null,
                    classeId: null,
                    vacationId: null
                });
            },
            removeUserLeave(index) {
                this.form.userLeaves.splice(index, 1)
            },
        }
    }
</script>

<style scoped>

</style>